<template>
    <div>
      <el-table :data="currentData" style="width: 100%;">
        <el-table-column width="50" prop="id" label="编号"></el-table-column>-->
        <el-table-column width="50" prop="name" label="姓名"></el-table-column>
        <el-table-column width="50" prop="password" label="密码"></el-table-column>
        <el-table-column width="100" prop="baseSalary" label="基本工资"></el-table-column>
        <el-table-column width="50" prop="sex" label="性别"></el-table-column>
        <el-table-column width="160" prop="tel" label="联系电话"></el-table-column>
        <el-table-column width="160" prop="idCard" label="身份证"></el-table-column>
        <el-table-column width="100" prop="rolePermiEntity.name" label="群组角色"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button-group>
              <el-button @click="handleEdit(scope.$index, scope.row)" type="success" size="mini" icon="el-icon-edit"></el-button>
              <el-button @click="handleDelete(scope.$index, scope.row)" type="danger" size="mini" icon="el-icon-delete"></el-button>
            </el-button-group>
            <el-dialog title="编辑员工" :visible.sync="dialogFormVisible">
              <el-form :model="form">
                <el-form-item label="员工编号" :label-width="formLabelWidth">
                  <el-input v-model="form.id" autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item label="员工姓名" :label-width="formLabelWidth">
                  <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                  <el-input v-model="form.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="基本工资" :label-width="formLabelWidth">
                  <el-input v-model="form.baseSalary" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="性别" :label-width="formLabelWidth">
                  <el-input v-model="form.sex" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" :label-width="formLabelWidth">
                  <el-input v-model="form.tel" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="身份证" :label-width="formLabelWidth">
                  <el-input v-model="form.idCard" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="群组角色" :label-width="formLabelWidth">
                  <el-select v-model="form.rolePermiEntity.name" placeholder="请选择角色">
                    <el-option label="普通管理员" value="普通管理员"></el-option>
                    <el-option label="超级管理员" value="超级管理员"></el-option>
                    <el-option label="会计" value="会计"></el-option>
                    <el-option label="服务员" value="服务员"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEditStaff">确 定</el-button>
              </div>
            </el-dialog>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        hide-on-single-page
        background
        :total="pageNum"
        :page-size="3"
        :page-count="7"
        :current-page="currentPage"
        @current-change="changePage"
      >
      </el-pagination>
    </div>
</template>

<script>
    import * as url from '../../../api/lypApi'
    import {mapActions,mapState} from 'vuex'
    export default {
        name: "StaffTable",
        methods:{
            saveEditStaff(){
                this.dialogFormVisible = false
                console.log(this.form)
                this.$axios({
                    url:`/lypApi${url.UPDATESTAFF}`,
                    method:'post',
                    data:this.form
                }).then(res=>{
                    console.log(res)
                    this.getStaffData()
                })
            },
            handleEdit(index, row) {
                this.dialogFormVisible = true
                console.log(index, row);
                this.form.id=row.id
                this.form.name=row.name
                this.form.password=row.password
                this.form.baseSalary=row.baseSalary
                this.form.sex=row.sex
                this.form.tel=row.tel
                this.form.idCard=row.idCard
                this.form.rolePermiEntity.name=row.rolePermiEntity.name
            },
            handleDelete(index, row) {
                console.log(row.id);
                this.$store.dispatch('deleteStaffData',row)
            },
            changePage(val){
                console.log(val)
                this.currentPage = val
            },
            ...mapActions(['getStaffData']),
        },
        data(){
            return {
                currentPage:1,
                dialogFormVisible: false,
                form: {
                    name: '',
                    password: '',
                    baseSalary: '',
                    sex: '',
                    tel: '',
                    idCard: '',
                    rolePermiEntity:{name: ''},
                    id:''
                },
                formLabelWidth: '120px'
            }
        },
        computed:{
            ...mapState({
                staffTableData:function (state) {
                    return state.lypStore.staff.staffTableData
                }
            }),
            currentData(){
                let begin = (this.currentPage -1) * 3
                let end = (this.currentPage -1) * 3+3
                return this.staffTableData.slice(begin,end)
            },
            pageNum(){
                // console.log(this.staffTableData)
                if(this.staffTableData===undefined){
                    return 0
                }else {
                    return this.staffTableData.length
                }

            }
        },
        created() {
            this.getStaffData()

        },
        watch:{
            currentData(){
                console.log(this.currentData)
            },
        }

    }
</script>

<style scoped>

</style>
